<template>
  <view class="payment-account">
    <header-vue :back="true" :title="title"></header-vue>
    <view class="payment-account-content">
      <!-- 支付宝账户 -->

      <view class="section-title">
        <image
          :src="IMAGE_URL+'/static/master/zfb.png'"
          class="method-icon"
          mode="aspectFit"
        ></image>
        <text>支付宝账户</text>
      </view>
      <view class="account-section">
        <view class="input-group">
          <view class="input-item">
            <text class="input-label">支付宝账户</text>
            <input
              v-model="alipayAccount"
              placeholder="请输入支付宝账户"
              class="input-field"
              type="text"
            />
          </view>
          <view class="input-item">
            <text class="input-label">姓名</text>
            <input
              v-model="alipayName"
              placeholder="请输入真实姓名"
              class="input-field"
              type="text"
            />
          </view>
        </view>
      </view>

      <!-- 微信账户 -->
      <view class="section-title">
        <image
          :src="IMAGE_URL+'/static/master/wx.png'"
          class="method-icon"
          mode="aspectFit"
        ></image>
        <text>微信账户</text>
      </view>
      <view class="account-section">
        <view class="input-group">
          <view class="input-item">
            <text class="input-label">手机号</text>
            <input
              v-model="wechatPhone"
              placeholder="请输入微信绑定的手机号"
              class="input-field"
              type="number"
            />
          </view>
          <view class="input-item">
            <text class="input-label">姓名</text>
            <input
              v-model="wechatName"
              placeholder="请输入真实姓名"
              class="input-field"
              type="text"
            />
          </view>
        </view>
      </view>

      <!-- 银行卡账户 -->

      <view class="section-title">
        <image
          :src="IMAGE_URL+'/static/master/yhk.png'"
          class="method-icon"
          mode="aspectFit"
        ></image>
        <text>银行卡账户</text>
      </view>

      <view class="account-section">
        <view class="input-group">
          <view class="input-item">
            <text class="input-label">持卡人</text>
            <input
              v-model="bankCardHolder"
              placeholder="请输入持卡人姓名"
              class="input-field"
              type="text"
            />
          </view>
          <view class="input-item">
            <text class="input-label">开户银行</text>
            <input
              v-model="bankName"
              placeholder="请输入"
              class="input-field"
              type="text"
            />
          </view>
          <view class="input-item">
            <text class="input-label">银行卡号</text>
            <input
              v-model="bankCardNumber"
              placeholder="请输入银行卡号"
              class="input-field"
              type="number"
            />
          </view>
        </view>
      </view>

      <!-- 确认按钮 -->
      <view class="confirm-section">
        <button class="confirm-btn" @click="handleConfirm">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import appConfig from "@/config/app.js";
    //  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  data() {
    return {
      IMAGE_URL: appConfig.IMAGE_URL,
      title: "收款账户",
      alipayAccount: "",
      alipayName: "",
      wechatPhone: "",
      wechatName: "",
      bankCardHolder: "",
      bankName: "",
      bankCardNumber: "",
    };
  },
  components: {
    headerVue,
  },
  methods: {
    handleConfirm() {
      // 表单验证
      if (!this.validateForm()) {
        return;
      }

      uni.showLoading({
        title: "保存中...",
      });

      // 模拟保存操作
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: "保存成功",
          icon: "success",
          duration: 2000,
        });

        // 返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    },

    validateForm() {
      // 简单的非空验证
      if (this.alipayAccount && !this.alipayName) {
        uni.showToast({
          title: "请输入支付宝真实姓名",
          icon: "none",
        });
        return false;
      }

      if (this.wechatPhone && !this.wechatName) {
        uni.showToast({
          title: "请输入微信真实姓名",
          icon: "none",
        });
        return false;
      }

      if (this.bankCardNumber) {
        if (!this.bankCardHolder) {
          uni.showToast({
            title: "请输入持卡人姓名",
            icon: "none",
          });
          return false;
        }
        if (!this.bankName) {
          uni.showToast({
            title: "请输入开户银行",
            icon: "none",
          });
          return false;
        }
      }

      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.payment-account {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #f5f5f5;

  .payment-account-content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;
    padding: 28rpx 32rpx;
  }

  .account-section {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  }

  .section-title {
    font-size: 30rpx;
    color: #333333;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 28rpx;
  }

  .input-group {
    padding: 0 30rpx;
  }

  .input-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }
  }

  .input-label {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
    min-width: 160rpx;
    margin-right: 20rpx;
  }

  .input-field {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
    height: 40rpx;
    line-height: 40rpx;

    &::placeholder {
      color: #cccccc;
      font-size: 26rpx;
    }
    ::v-deep .uni-input-placeholder {
      text-align: right;
      font-size: 24rpx;
      color: #999999;
    }
  }

  .confirm-section {
    padding: 40rpx 30rpx;
  }

  .confirm-btn {
    width: 630rpx;
    height: 76rpx;
    background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    line-height: 76rpx;
    border: none;

    font-size: 36rpx;
    color: #ffffff;

    &::after {
      border: none;
    }

    &:active {
      background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
    }
  }
}

.method-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 6px;
}
</style>
